{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        {include file='public:left-menu'/}
        <!--End 左侧导航-->
        <!--头部信息-->
        {include file='public:nav-header' title="会员管理" subTitle="添加编辑代理会员"/}
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form method="post" id="submit-form" class="">
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>手机号码</label>
                                            {if $info}
                                            <input type="text" class="form-control" value="{$info.user.mobile}" name="mobile" placeholder="请输入手机号码"/>
                                            {else/}
                                            <input type="text" class="form-control" name="mobile" placeholder="请输入手机号码"/>
                                            {/if}
                                            <span class="error" id="err_mobile"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>代理等级</label>
                                            <select class="input-group-select w-100" name="level">
                                                <option value="1" {if $info.level==1}selected{/if}>省级</option>
                                                <option value="2" {if $info.level==2}selected{/if}>市级</option>
                                                <option value="3" {if $info.level==3}selected{/if}>县级</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>奖励比例</label>
                                            <input type="text" class="form-control" value="{$info.jl_bili}" name="jl_bili" placeholder="请输入奖励比例"/>
                                            <span class="error" id="err_jl_bili"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>所在地区</label>
                                            <div class="form-inline">
                                                <select class="input-group-select dizhi" name="pid">
                                                    {volist name="$parents" id="parent"}
                                                    <option value="{$parent.id}" {if $info.pid==$parent.id}selected{/if}>{$parent.name}</option>
                                                    {/volist}
                                                </select>
                                                <select class="input-group-select dizhi" name="cid">
                                                    <option value="">请选择</option>
                                                    {volist name="$citys" id="city"}
                                                    <option value="{$city.id}" {if $info.cid==$city.id}selected{/if}>{$city.name}</option>
                                                    {/volist}
                                                </select>
                                                <select class="input-group-select dizhi" name="did">
                                                    <option value="">请选择</option>
                                                    {volist name="$districts" id="district"}
                                                    <option value="{$district.id}" {if $info.did==$district.id}selected{/if}>{$district.name}</option>
                                                    {/volist}
                                                </select>
                                            </div>
                                            <span class="error" id="err_did"></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>经度</label>
                                            <input type="text" class="form-control" name="longitude" readonly value="{$info.longitude}" placeholder="经度"/>
                                            <span class="error" id="err_longitude"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-title"><em class="require">*</em>纬度</label>
                                            <input type="text" class="form-control" name="latitude" readonly value="{$info.latitude}" placeholder="纬度"/>
                                            <span class="error" id="err_latitude"></span>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="row">
                                            <label class="form-title"><em class="require">*</em>搜索地区</label>
                                            <div class="input-group">
                                                <input type="text" id="search_input" class="form-control" placeholder="请输入地址搜索">
                                                <span class="input-group-btn">
                                                     <button class="btn btn-default" id="confirm" type="button">确定</button>
                                                </span>
                                            </div>
                                            <div class="map">
                                                <div id="map"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <input type="hidden" name="{$info.pk}" value="{$info[$info.pk]}">
                                            <button type="button" class="btn-theme submit-btn">确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .form-inline{
        justify-content: space-between;
    }
    .form-inline .form-control,.form-inline select{
        width: 33%;
    }
    .map{
        height: 400px;
        margin-top: 10px;
    }
    #map{
        height: 400px;
    }
    #map img{
        max-width: none!important;
    }
    .BMap_cpyCtrl{
        display: none;
    }
    .anchorBL{
        bottom: 5px!important;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZmTIZWrqK0bx4eN5fUoNOMr0ElHY6dMG"></script>
<script type="text/javascript">
    var lng,lat,province,city,district,address;
    var myValue;
    var loadCount = 0;
    var map = new BMap.Map("map");
    $(document).ready(function () {
        initMap();
    });
    function initMap(){
        var city1 = '{$info.city}' || '菏泽';
        //115.51227,35.239408 菏泽火车站
        var longitude=$('[name=longitude]').val() || '115.51227';
        var latitude=$('[name=latitude]').val() || '35.239408';
        var all_address='{$info.all_address}';
        // 百度地图API功能
        // map =  new BMap.Map("map");   // 创建Map实例
        var new_point = new BMap.Point(longitude,latitude);
        map.centerAndZoom(new_point, 14);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.panTo(new_point);
        map.addOverlay(marker);
        map.setCurrentCity(city1);          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.enableInertialDragging();
        map.enableContinuousZoom();
        map.addEventListener("tilesloaded",function(){
            if(loadCount == 1){
                map.setCenter(new_point);
            }
            loadCount = loadCount + 1;
        });
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "search_input"
                ,"location" : map
            });
        // ac.setInputValue(all_address);
        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            // G("searchResultPanel").innerHTML = str;
        });
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            city=_value.city;
            district=_value.district;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            setPlace();
        });
    }
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var title=local.getResults().getPoi(0).title;
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
            province=local.getResults().getPoi(0).province;
            lng=pp.lng;
            lat=pp.lat;
            address=title;
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
    function G(id) {
        return document.getElementById(id);
    }
    function get_region(id,obj){
        var url = "{:url('Index/get_region')}";
        var data = {'parent_id':id};
        public_ajax(url,data,function (data) {
            var html='';
            if (data.code == 1) {
                $.each(data.result, function(index, item) {
                    html+='<option value="'+item.id+'">'+item.name+'</option>';
                });
            }
            $(obj).nextAll().empty().append('<option value="">请选择</option>');
            $(obj).next().append(html);
        });
    };
    $(function () {
        $('.dizhi').on('change',function () {
            var val=$(this).val();
            get_region(val,this);
        });
        $('#confirm').on('click',function () {
            var search_input_val=$('#search_input').val();
            if (search_input_val==''){
                showErrorMsg('请输入地址搜索');
                return;
            }
            // $('[name=province]').val(province);
            // $('[name=city]').val(city);
            // $('[name=district]').val(district);
            // $('[name=address]').val(address);
            $('[name=longitude]').val(lng);
            $('[name=latitude]').val(lat);
            // $('#zuobiao').val(lng+"|"+lat)
        });
        $('.submit-btn').click(function () {
            $('span.error').hide();
            $('.has-error').removeClass('has-error');
            var url = "{:url('User/add_edit_dl_user')}";
            var data = $('#submit-form').serialize();
            public_ajax(url,data,function (data) {
                if (data.code == 1) {
                    showSuccessMsg(data.msg, function () {
                        if (data.url) {
                            location.href = data.url;
                        }
                    });
                } else if (data.code == 10) {
                    showErrorMsg(data.msg);
                    $.each(data.data.result, function(index, item) {
                        $('#err_' + index).text(item).show();
                        $('#err_' + index).parent().addClass('has-error');
                    });
                } else {
                    showErrorMsg(data.msg);
                }
            });
        });
    });
</script>
</body>
</html>
